<template>
  <div class="login">
        <div class="icon">
          <img src="../../assets/images/logo.png" alt="">
        </div>
        <div class="loginBtn" @click="login">
            手机号登录
        </div>
        <div class="experienceBtn" @click="tiyan">
            立即体验
        </div>
        <div class="logoBox">
          <div class="wechat">
            <img src="../../assets/images/wechat.png" alt="">
          </div>
          <div class="qq">
            <img src="../../assets/images/QQ.png" alt="">
          </div>
          <div class="weibo">
            <img src="../../assets/images/weibo.png" alt="">
          </div>
          <div class="wangyi">
            <img src="../../assets/images/wangyi.png" alt="">
          </div>
        </div>
        <div class="checkBox">
          <input type="checkbox" id="checkbox" v-model="isCheck">
          <label for="checkbox">
              <div></div>
              <span>同意《用户协议》和《隐私政策》</span>
          </label>
        </div>
  </div>
</template>

<script>
export default {
  components:{},
  props:{},
  data(){
    return {
      isCheck : false
    }
  },
  watch:{},
  computed:{},
  methods:{
    login(){
      if(this.isCheck){
        this.$router.push({
          path:"/phoneLogin"
        })
      }else{
        this.$toast({
            message:'请先勾选"用户协议"和"隐私政策"',
            duration:1500
        })
      }
    },
    tiyan(){
      if(this.isCheck){
        this.$store.commit("saveIsExperience");
        this.$router.push({
          path:"/find"
        })
      }else{
        this.$toast({
            message:'请先勾选"用户协议"和"隐私政策"',
            duration:1500
        })
      }
    }
  },
  created(){},
  mounted(){}
}
</script>
<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .login{
      width: vw(375);
      height: vw(667);
      background-color: #df2d1f;
      position: relative;
      .icon{
        width: vw(68);
        height: vw(68);
        background-color: #ff4f26;
        border-radius: 50%;
        font-size: 0;
        position: absolute;
        top: 16%;
        left: 50%;
        transform: translateX(-50%);
        img{
          display:block;
          width: 60%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      }
      .loginBtn{
        width:vw(300);
        height: vw(40);
        border-radius: vw(30);
        background-color: white;
        text-align: center;
        line-height: vw(40);
        font-size: vw(20);
        color: #df2d1f;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
      }
      .experienceBtn{
        width:vw(300);
        height: vw(40);
        border-radius: vw(30);
        text-align: center;
        line-height: vw(40);
        font-size: vw(20);
        color:white;
        border: 1px solid rgba(255, 162, 155, 0.8);;
        position: absolute;
        top: 69%;
        left: 50%;
        transform: translateX(-50%);
      }
      .logoBox{
        width: vw(240);
        height: vw(30);
        position: absolute;
        top: 80%;
        left: 50%;
        transform:translateX(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        div{
          width: vw(30);
          height: vw(30);
          border: vw(1) solid rgba(255, 162, 155, 0.6);
          border-radius: 50%;
          font-size: 0;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            height: 80%;
          }
        }
      }
      .checkBox{
        position: absolute;
        bottom: 6%;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        white-space: nowrap;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input{
          visibility: hidden;
        }
        label{
            div{
                display: inline-block;
                width: vw(16);
                height: vw(16);
                border: 1px solid rgba(255, 162, 155, 0.8);
                vertical-align: middle;
                margin-right: vw(6);
                line-height: vw(16);
            }
            span{
              word-spacing: vw(2);
              font-size: vw(4);
            }
        }
        input:checked + label>div::before{
            display: block;
            content: "\2713";
            text-align: center;
            line-height: 0.8em;
            font-size: vw(16);
            color: white;
        }
      }
    }

</style>